<template>
    <div>
        <el-form :inline="true" :model="CarVo" class="demo-form-inline" style="float: left">
            <el-form-item>
                <el-input v-model="CarVo.dictName" placeholder="字典名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="insertCar">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="refresh">刷新</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="delete" type="danger" @click="insertDelete">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="dictId"
                    label="字典编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="dictName"
                    label="字典名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="dictType"
                    label="字典类型"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="status"
                    label="状态"
                    width="200"
            >
                <template slot-scope="scope" >
                    <p v-if="scope.row.status == 1" style="color: crimson" >停用</p>
                    <p v-else-if="scope.row.status == 0" style="color: #409eff" >正常</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="描述"
                    width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="updateCar(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteCar(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                title="修改"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :label-position="car" label-width="80px" :model="formLabelAlign">
                <el-form-item label="字典名称">
                    <el-input v-model="car.dictName"></el-input>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="car.dictType"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="car.status" placeholder="请选择状态"   style="width: 100%;" >
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="停用" value="停用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="更新者">
                    <el-input v-model="car.updateBy"></el-input>
                </el-form-item>
                <el-form-item label="更新时间">
                    <div class="block">
                        <el-date-picker
                                v-model="car.updateTime"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="car.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="添加车辆"
                :visible.sync="dialogVisible2"
                width="30%"
                :before-close="handleClose">
            <el-form  label-width="80px" :model="car2">


                <el-form-item label="字典名称">
                    <el-input v-model="car2.dictName"></el-input>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="car2.dictType"></el-input>
                </el-form-item>
                <el-form-item label="创建者">
                    <el-input v-model="car2.createBy"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <div class="block">
                        <el-date-picker
                                v-model="car2.createTime"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="car2.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="confirmInsert()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "DictType",
        created() {
            this.initTable();
        },
        mounted() {
            this.token=window.localStorage.getItem("token")
        },
        computed:{
            headerObj(){
                return{
                    token:this.token
                }
            }
        },

        methods: {
            refresh(){
                this.CarVo = {};
                this.currentPage = 1;
                this.pageSize = 5;
                this.initTable();
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            cancel(){
                this.initTable();
                this.dialogVisible=false;
            },
            confirmInsert(){
                this.$http.post("system/sdt/insert",this.car2).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("添加成功");
                        this.initTable();
                        this.dialogVisible2=false;
                        this.car2={};
                    }
                })
            },
            insertCar(){
                this.dialogVisible2=true;
            },
            confirmUpdate(){
                this.$http.post("system/sdt/update",this.car).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("修改成功");
                        this.initTable();
                        this.dialogVisible=false;
                    }
                })
            },
            updateCar(row){
                this.dialogVisible=true;
                this.car=row;
                if (row.status==1){
                    this.car.status="停用"
                }else if (row.status==0){
                    this.car.status="正常"
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
                this.initTable();
            },
            initTable(){
                this.$http.post("system/sdt/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.CarVo).then(result=>{
                    this.tableData=result.data.data.list;
                    this.total=result.data.data.total;
                })
            },
            onSubmit(){
                this.initTable();
            },
            deleteCar(row){
                this.$http.delete("system/sdt/delete?dictId="+row.dictId).then(resp=>{
                    if (resp.data.code==2000){
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            insertDelete(){
                if (this.multipleSelection==""){
                    this.$message.warning('请至少选择一条数据进行删除！')
                }else {
                    this.$confirm('此操作将永久删除，是否继续？','提示',{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning',
                        center:true
                    }).then(()=>{
                        let rentids=[]
                        for (let i=0;i<this.multipleSelection.length;i++){
                            let aaa=[]
                            aaa=this.multipleSelection[i].dictId;
                            rentids.push(aaa)
                        }
                        this.$http.post("system/sdt/deletes?dictId="+rentids).then(result=>{
                            if (result.data.code===2000) {
                                this.$message.success("删除成功");
                                this.initTable();
                            }
                        })
                    })
                }
            },
        },

        data() {
            return {
                multipleSelection: [],
                dialogVisible: false,
                dialogVisible2: false,
                tableData: [],
                CarVo: {},
                currentPage:1,
                pageSize:5,
                total:0,
                car:{},
                car2:{},
                token:'',

            }
        }
    }
</script>
<style scoped>
</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
</style>